<template>  
<canvas  
v-if="canvasId"  
class="ec-canvas"  
:id="canvasId"  
:canvasId="canvasId"  
@touchstart="touchStart"  
@touchmove="touchMove"  
@touchend="touchEnd"  
@error="error"  
></canvas>  
</template>  
<script>  
import WxCanvas from "./wx-canvas";  
export default {  
props: {  
canvasId: {  
  type: String,  
  default: "ec-canvas"  
},  
lazyLoad: {  
  type: Boolean,  
  default: false  
},  
disableTouch: {  
  type: Boolean,  
  default: false  
},  
throttleTouch: {  
  type: Boolean,  
  default: false  
}  
},  
// #ifdef H5  
mounted() {  
if (!this.lazyLoad) this.init();  
},  
// #endif  
// #ifndef H5  
onReady() {  
if (!this.lazyLoad) this.init();  
},  
// #endif  
methods: {  
setChart(chart) {  
  this.chart = chart;  
},  
init() {  
  const { canvasId } = this;  
  this.ctx = wx.createCanvasContext(canvasId, this);  
  this.canvas = new WxCanvas(this.ctx, canvasId);  
  const query = wx.createSelectorQuery().in(this);  
  query  
    .select(`#${canvasId}`)  
    .boundingClientRect(res => {  
      if (!res) {  
        setTimeout(() => this.init(), 50);  
        return;  
      }  
      this.$emit("onInit", {  
        width: res.width,  
        height: res.height  
      });  
    })  
    .exec();  
},  
canvasToTempFilePath(opt) {  
  const { canvasId } = this;  
  this.ctx.draw(true, () => {  
    wx.canvasToTempFilePath({  
      canvasId,  
      ...opt  
    });  
  });  
},  
touchStart(e) {  
  const { disableTouch, chart } = this;  
  if (disableTouch || !chart || !e.mp.touches.length) return;  
  const touch = e.mp.touches[0];  
  chart._zr.handler.dispatch("mousedown", {  
    zrX: touch.x,  
    zrY: touch.y  
  });  
  chart._zr.handler.dispatch("mousemove", {  
    zrX: touch.x,  
    zrY: touch.y  
  });  
},  
touchMove(e) {  
  const { disableTouch, throttleTouch, chart, lastMoveTime } = this;  
  if (disableTouch || !chart || !e.mp.touches.length) return;  
  if (throttleTouch) {  
    const currMoveTime = Date.now();  
    if (currMoveTime - lastMoveTime < 240) return;  
    this.lastMoveTime = currMoveTime;  
  }  
  const touch = e.mp.touches[0];  
  chart._zr.handler.dispatch("mousemove", {  
    zrX: touch.x,  
    zrY: touch.y  
  });  
},  
touchEnd(e) {  
  const { disableTouch, chart } = this;  
  if (disableTouch || !chart) return;  
  const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};  
  chart._zr.handler.dispatch("mouseup", {  
    zrX: touch.x,  
    zrY: touch.y  
  });  
  chart._zr.handler.dispatch("click", {  
    zrX: touch.x,  
    zrY: touch.y  
  });  
}  
}  
};  
</script>  
<style scoped>  
.ec-canvas {  
width: 100%;  
height: 100%;  
flex: 1;  
}  
</style>